<template>
    <div class="goods-create">
        <i-steps 
            class="goods-create__steps"
            :current="stepCurrent">
            <i-step 
                class="step"
                v-for="(item, index) in stepList"
                :key="index"
                :title="item.title"
                @click.native="changeStep(index)">
            </i-step>
        </i-steps>
        <i-card :style="stepCurrent === 1 && stepCurrent1Style">
            <div class="goods-create__con">
                <step-one ref="stepOne" v-show="stepCurrent === 0">
                    <i-row class="margin-top">
                        <i-col span="12" offset="5">
                            <i-form-item>
                                <i-button
                                    type="primary"
                                    @click="changeStep(1)">下一步</i-button>
                            </i-form-item>
                        </i-col>
                    </i-row>
                </step-one>
                <step-two class="step-two" v-show="stepCurrent === 1"></step-two>
            </div>
        </i-card>
    </div>
</template>
<script>
// mapState
import { mapState } from 'vuex'

// sku table
import SkuTable from './components/SkuTable'

// custom component
import StepOne from './components/StepOne'
import StepTwo from './components/StepTwo'

// draggable
import Draggable from 'vuedraggable'

export default {
    name: 'goods-create',
    components: {
        SkuTable,
        StepOne,
        StepTwo,
        Draggable
    },
    data() {
        return {
            /**
             * 当前steps的状态
             *
             * @default 2
             * @type {Number}
             */
            stepCurrent: 1,
            /**
             * step 数组列表
             *
             * @type {Array.<Object>}
             */
            stepList: [
                {
                    /**
                     * 步骤名称
                     *
                     * @type {String}
                     */
                    title: '基本信息'
                },
                {
                    title: '商品详情'
                },
                {
                    title: '商品关联'
                }
            ]
        }
    },
    computed: {
        ...mapState('adminShell/adminSidebar', ['asideWidth']),
        ...mapState('adminShell/adminHelper', ['helperWidth']),
        ...mapState('adminShell/adminFooter', ['footerHeight']),
        stepCurrent1Style() {
            return {
                position: 'absolute',
                right: parseFloat(this.helperWidth) + 16 + 'px',
                left: parseFloat(this.asideWidth) + 16 + 'px',
                bottom: this.footerHeight,
                top: '132px'
            }
        }
    },
    mounted() {},
    methods: {
        /**
         * 提交表单验证
         *
         * @param {String} formName - 表单名称
         */
        handleSubmit(formName) {
            return this.$refs.stepOne.handleSubmit(formName)
        },
        /**
         * 点击修改当前步骤 (steps) 状态
         *
         * @param {Number} index - 步骤的索引
         */
        changeStep(index) {
            if (index === 0) {
                this.stepCurrent = index
            } else if (index === 1) {
                this.handleSubmit('formValidate').then(resolve => {
                    if (resolve) {
                        this.stepCurrent = index
                    }
                })
            }
        }
    },
    watch: {}
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/theme/index';
.goods-create__steps {
    width: 90%;
    margin: 0 auto;
    transform: translateX(70px);
    margin-top: 20px;
    margin-bottom: 20px;
    &:hover {
        cursor: pointer;
    }
}
.goods-create__con {
    .row {
        background: @table-thead-bg;
    }
    .col-left {
        padding-top: 30px;
    }
    .col-right {
        padding: @gap;
        padding-top: 30px;
        border-left: 1px solid #fff;
    }
    .step-two {
    }
}
.specifition-card {
    .ivu-card-head {
        p {
            font-size: 13px;
            font-weight: normal;
            height: inherit;
            display: flex;
            justify-content: space-between;
            .card__icon-close {
                display: none;
                color: #aaa;
                cursor: pointer;
                &:hover {
                    color: @link-color;
                }
            }
            .ivu-checkbox-wrapper {
                margin-left: @gap;
            }
        }
    }
    &:hover .ivu-card-head .card__icon-close {
        display: initial;
    }
}
</style>